<template>
	<view>
		<!--点击按钮生成海报-->
		<fui-button type="gray" width="400rpx" height="84rpx" text="基本使用" bold @click="poster"></fui-button>
			<!--海报组件-->
			<fui-poster ref="generator" :width="560" :height="980" @ready="ready"></fui-poster>
	</view>
</template>


<script>
	// 在你的Vue组件中
	export default {
		data() {
			return {
				isReady: false,
				//基本使用案例数据
				basicData: {
					//绘制块状：正方形，长方形，圆形等
					blocks: [{
						//绘制海报背景
						x: 0,
						y: 0,
						width: 560,
						height: 980,
						backgroundColor: '#ffffff'
					}, {
						//绘制带圆角方形
						x: 20,
						y: 20,
						width: 100,
						height: 100,
						borderRadius: 20,
						backgroundColor: '#465CFF',
						zIndex: 2
					}, {
						//渐变背景
						x: 140,
						y: 20,
						width: 100,
						height: 200,
						backgroundColor: '#FF2B2B',
						gradientColor: '#6831FF',
						zIndex: 2
					}, {
						//带边框
						x: 260,
						y: 20,
						width: 100,
						height: 100,
						borderWidth: 1,
						borderColor: '#465CFF',
						zIndex: 2
					}, {
						//圆形
						x: 380,
						y: 20,
						width: 100,
						height: 100,
						borderRadius: 100,
						backgroundColor: '#465CFF',
						zIndex: 2
					}],
					//绘制图片数据
					imgs: [{
						//图片资源类型在各平台支持情况与官方api一致，请先阅读官方api文档
						imgResource: '/static/images/common/img_logo.png',
						x: 20,
						y: 260,
						width: 100,
						height: 100,
						zIndex: 2
					}, {
						imgResource: '/static/images/common/img_logo.png',
						x: 140,
						y: 260,
						width: 100,
						height: 100,
						borderRadius: 16,
						zIndex: 2
					}, {
						imgResource: '/static/images/common/img_logo.png',
						x: 260,
						y: 260,
						width: 100,
						height: 100,
						borderRadius: 100,
						zIndex: 2
					}],
					//绘制文本数据
					texts: [{
						text: 'First UI',
						x: 20,
						y: 420,
						fontSize: 32,
						color: '#181818',
						width: 520,
						fontWeight: 'bold',
						zIndex: 3
					}, {
						text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
						x: 20,
						y: 460,
						fontSize: 20,
						color: '#181818',
						width: 496,
						zIndex: 3
					}, {
						text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
						x: 20,
						y: 520,
						fontSize: 20,
						lineHeight: 32,
						color: '#B2B2B2',
						width: 496,
						rows: 2,
						zIndex: 3
					}, {
						text: '此段文字作废',
						x: 20,
						y: 620,
						fontSize: 22,
						color: '#B2B2B2',
						width: 500,
						lineThrough: true,
						zIndex: 3
					}, {
						text: 'End!',
						x: 20,
						y: 916,
						fontSize: 44,
						color: '#465CFF',
						width: 500,
						fontWeight: 'bold',
						zIndex: 6
					}],
					//绘制线条数据
					lines: [{
						x: 20,
						y: 660,
						endX: 220,
						endY: 660,
						color: '#181818',
						width: 1,
						zIndex: 4
					}, {
						x: 20,
						y: 700,
						endX: 240,
						endY: 700,
						color: '#09BE4F',
						width: 4,
						zIndex: 4
					}, {
						x: 20,
						y: 740,
						endX: 240,
						endY: 780,
						color: '#6831FF',
						width: 4,
						zIndex: 4
					}, {
						x: 20,
						y: 780,
						endX: 240,
						endY: 740,
						color: '#FFB703',
						width: 4,
						zIndex: 5
					}, {
						x: 20,
						y: 820,
						endX: 520,
						endY: 820,
						color: '#465CFF',
						width: 4,
						zIndex: 5
					}]
				}
			}
		},
		methods: {},
		//组件初始化完成事件
		ready() {
			this.isReady = true;
		},
		//调用方法绘制海报
		poster() {
			if (this.isReady) {
				uni.showLoading({
					title: '正在生成...'
				})
				this.$refs.generator.generatePoster(this.basicData, (res) => {
					console.log(res)
					uni.previewImage({
						urls: [res]
					})
					uni.hideLoading()
				})
			} else {
				this.fui.toast('组件尚未初始化完成！')
			}
		}
	}
</script>

<style scoped>

</style>